<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<div class="top">
					<h3>商品标签</h3>
					<!-- <el-button type="primary">添加商品标签</el-button> -->
					<el-button plain type="primary"  v-if="counter.btnsObj.addFlag" @click="add">{{counter.btnsObj.addName}}</el-button>
				</div>
				<el-form-item label="标签名称" label-width="90">
				  <el-input v-model="form.tagName" placeholder="请输入标签名称" />
				  <el-button type="primary" @click="search" style="margin-left: 10px;">搜索</el-button>
				  <el-button @click="reset">重置</el-button>
				</el-form-item>
				<el-table :data="tableData" style="width: 100%" height="50vh">
				    <el-table-column prop="tagName" label="标签名称" width="180" />
				    <el-table-column prop="tagExplain" label="标签说明" width="180" />
				    <el-table-column prop="delflag" label="排序" />
					<el-table-column label="操作">
						<template #default="record">
							<a class="mya" @click="modify(record.row)" style="cursor: pointer;">编辑</a>
							<a class="mya" @click="del(record.row)" style="cursor: pointer;">删除</a>
						</template>
						
					</el-table-column>
				  </el-table>
				  
				  <el-pagination
				  	layout="prev,pager,next"
				  	:page-count="total"
				  	:page-size="pageSize"
				  	v-model:current-page="pageIndex"	
				  	@current-change="changePage"
				  ></el-pagination>
			</el-main>
	    </el-container>
	</div>
	
	
	<!-- 编辑框 -->
	<el-dialog v-model="dialogFormVisible" title="编辑商品标签" width="500">
	    <el-form :model="formdata" label-width="auto">
	      <el-form-item label="标签名称" label-width="130">
	        <el-input v-model="formdata.tagName" autocomplete="off" class="inp" />
	      </el-form-item>
	      <el-form-item label="标签说明" label-width="130">
				 <el-input
				    v-model="formdata.tagExplain"
				    style="width: 240px"
				    :rows="2"
				    type="textarea"
				    placeholder="请输入标签说明"
				  />
	      </el-form-item>
		  <el-form-item label="排序" label-width="130">
			  <el-input
			      v-model="formdata.delflag"
			      style="width: 240px"
			      maxlength="6"
			      placeholder="0"
			      show-word-limit
			      type="text"
			    />
		  </el-form-item>
	    </el-form>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogFormVisible = false">取消</el-button>
	        <el-button type="primary" @click="serve">
	          确定
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	  
	  
	  
	  <!-- 确认删除框 -->
	   <el-dialog
	      v-model="dialogVisible1"
	      title="提示"
	      width="500"
	    >
	      <span>确定要删除该数据吗</span>
	      <template #footer>
	        <div class="dialog-footer">
	          <el-button @click="dialogVisible1 = false">取消</el-button>
	          <el-button type="primary" @click="define">
	            确定
	          </el-button>
	        </div>
	      </template>
	    </el-dialog>
		
		
		<!-- 添加框 -->
		<el-dialog v-model="dialogFormVisible2" title="添加商品标签" width="500">
		    <el-form :model="formdataa" ref="ruleFormRef" :rules="rules" label-width="auto">
		      <el-form-item label="标签名称" prop="tagName" label-width="130">
		        <el-input v-model="formdataa.tagName" autocomplete="off" class="inp" />
		      </el-form-item>
		      <el-form-item label="标签说明" prop="tagExplain" label-width="130">
					 <el-input
					    v-model="formdataa.tagExplain"
					    style="width: 240px"
					    :rows="2"
					    type="textarea"
					    placeholder="请输入标签说明"
					  />
		      </el-form-item>
			  <el-form-item label="排序" label-width="130">
				  <el-input
				      v-model="formdataa.delflag"
				      style="width: 240px"
				      maxlength="6"
				      placeholder="0"
				      show-word-limit
				      type="text"
					  class="inp1"
				    />
			  </el-form-item>
		    </el-form>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogFormVisible2 = false">取消</el-button>
		        <el-button type="primary" @click="sure(ruleFormRef)">
		          确定
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
</template>

<script setup>
	import {reactive,ref,onMounted} from 'vue';
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from "../stores/counter"
	import Header from "@/components/Header.vue"
	import {TagList,ReviseTag,DelTag,InsertTag} from "@/api"
	import { ElMessage } from 'element-plus'
	let dialogFormVisible = ref(false)
	let dialogVisible1 = ref(false)
	let dialogFormVisible2 = ref(false)
	let route = useRoute();
	let router = useRouter();
	let counter = useCounterStore();
	counter.btns = route.meta.btns
	//获取标签列表
	let tableData = ref([])
	let pageIndex=ref(1);
	let pageSize=7;
	let total=ref(0)
	const tagList=async ()=>{
		let res=await TagList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:1
		})
		//console.log("标签列表",res)
		tableData.value=res.tagFieldList
		total.value=res.pageCount
	}
	let form = reactive({
		tagName:""
	})
	//搜索标签
	const SearchTag =async ()=>{
		let res1=await TagList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			tagName:form.tagName,
			siteId:1
		})
		tableData.value=res1.tagFieldList
		// console.log("sousio",res1)
		total.value=res1.pageCount
	}
	const search =()=>{
		pageIndex.value=1
		SearchTag()
	}
	
	//点击分页器
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		tagList()
	}
	let formdata = reactive({
	  tagName: '',
	  tagExplain: "",
	  delflag:""
	})
	
	let formdataa = reactive({
	  tagName: '',
	  tagExplain: "",
	  delflag:""
	})
	//点击编辑
	const modify =(row)=>{
		dialogFormVisible.value= true
		//console.log("标签编辑",row)
		formdata = row
	}
	//点击编辑中的确定
	const serve = async ()=>{
		dialogFormVisible.value= false
		let res1 = await ReviseTag(formdata)
		if(res1 == null){
			ElMessage.success({
				message:"修改成功"
			})
		}else{
			ElMessage.error({
				message:"修改失败"
			})
		}
		//console.log("编辑",res1)
	}
	
	//点击删除
	const del= (data)=>{
		dialogVisible1.value= true
		//console.log(data)
		sessionStorage.setItem("tagId",data.tagId)
	}
	//点击删除中的确定
	const define=async ()=>{
		dialogVisible1.value= false
		let da =await DelTag({"tagId":Number(sessionStorage.getItem("tagId"))})
		//console.log("删除",da)
		tagList()
		if(da == null){
			ElMessage.success({
				message:"删除成功"
			})
		}else{
			ElMessage.error({
				message:"删除失败"
			})
		}
		
	}
	//添加中的验证
	const ruleFormRef = ref(null)
	const rules = reactive({
		tagName: [
		    { required: true, message: '标签名称不能为空', trigger: 'blur' },
		],
		tagExplain: [
		    { required: true, message: '标签说明不能为空', trigger: 'blur' },
		]
	})
	//点击添加
	const add = ()=>{
		dialogFormVisible2.value=true
		formdataa = reactive({
		  tagName: '',
		  tagExplain: "",
		  delflag:"",
		  siteId:1
		})
	}
	//添加中的确定
	const sure =(formEl)=>{
		
		formEl.validate(async (valid)=>{
			if(valid){
				dialogFormVisible2.value=false
				let rep = await InsertTag(formdataa)
				// console.log("成功",rep)
				if(rep == null){
					ElMessage.success({
						message:"添加成功"
					})
				}else{
					ElMessage.error({
						message:"添加失败"
					})
				}
				
				tagList()
			}
		})
		
	}
	//重置按钮
	const reset = ()=>{
		form.tagName = ""
		tagList()
	}
	onMounted(()=>{
		tagList()
	})
</script>


<style scoped lang="less">
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.el-input{
				width:200px;
			}
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
			:deep(.el-table .el-table__cell){
				text-align: center !important;
			}
		}
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
	}
	.inp{
		width: 240px;
	}
	
</style>